<template>
<view class="card-page-detail">
	<view class="activity-header">
		<view class="name">{{name}}</view>
		<view class="status" :class="'status-'+status"><b></b>{{status==='1'?'启用':'停用'}}</view>
	</view>
	<view class="activity-content">
		<slot></slot>
	</view>
	<view class="activity-footer" v-if="cardType!=='worker'">
		<view class="single-btn"><button type="primary" @click="$emit('onEdit', objId)" size="mini">编辑</button></view>
		<view class="single-btn" v-if="status==='1'"><button type="warn" @click="$emit('onUpdateStatus', objId, '0')" size="mini">停用</button></view>
		<view class="single-btn" v-if="status==='0'"><button type="warn" @click="$emit('onUpdateStatus', objId, '1')" size="mini">启用</button></view>
	</view>
	<view class="activity-footer" v-if="cardType==='worker'">
		<view class="single-btn" v-if="status==='1'"><button type="default" @click="$emit('onUpdateStatus', objId, '0')" size="mini">停用</button></view>
		<view class="single-btn" v-if="status==='0'"><button type="primary" @click="$emit('onUpdateStatus', objId, '1')" size="mini">启用</button></view>
		<view class="single-btn"><button type="warn" @click="$emit('onEdit', objId)" size="mini">删除</button></view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		name: {
			type: String, default: '配置'
		},
		status: {
			type: String, default: ''
		},
		objId: {
			type: Number, default: 0
		},
		cardType: {
			type: String, default: ''
		}
	},
	methods: {
	}
}
</script>

<style lang="scss">
.card-page-detail {
	background:#fdfdfd; border:1px #ddd solid; border-radius: 10rpx;
	box-shadow: 0px 0px 3px 3px #e0e0e0; margin-top: 24rpx;
	padding: 20rpx;
}

.activity-header {
	display: flex; width: 100%; border-bottom: 1px #ddd solid; height: 60rpx; line-height: 60rpx;
}
.activity-header .name {
	flex: 1;
}
.activity-header .status {
	width: 140rpx; text-align: center;
}
.activity-header .status b {
	width: 20rpx; height: 20rpx; border-radius: 20rpx; display: inline-block; margin-right: 10rpx;
}
.activity-header .status-1 b {
	background:#12a50a;
}
.activity-header .status-0 b {
	background:#cd0000;
}
.activity-header .status-0 {
	color:#cd0000;
}
.activity-header .status-1 {
	color:#12a50a;
}

.activity-content {
	padding-top: 20rpx;
}

.activity-footer {
	display: flex;  width: 100%; margin-top: 20rpx; border-top: 1px #ddd solid; padding-top: 24rpx;
}
.activity-footer .single-btn {
	flex: 1; text-align: center;
}
</style>
